<template>
  <div :class="[
                'quick-filter-item',
                'cursor-pointer',
                {
                  'quick-filter-item--active':active,
                  'quick-filter-item--disabled':disabled,

                  [`quick-filter-item--${trigger}`]:close !==false,
                  'quick-filter-item--close':close ===false,
                }
              ]"
       ref="quick-filter-item">
    <span class="quick-filter-item__prefix inline-block"
          v-if="$slots.prefix || prefixIcon">
      <slot name="prefix">
        <i :class="['quick-filter-item__prefix-icon',prefixIcon]"
           v-if="prefixIcon"></i>
      </slot>
    </span>

    <slot>
      <div class="flex-1 truncate">
        <EllipsisVessel :text="name" placement="top-end"/>
<!--        <template v-if="isShowTotal"><el-badge class="mark" :value="total" /></template>-->
        <template v-if="isShowTotal">
          <div class="el-badge mark"><sup class="el-badge__content">{{ total || 0 }}</sup></div>
        </template>
      </div>
    </slot>

    <span class="quick-filter-item__suffix inline-block"
          v-if="$slots.suffix || suffixIcon">
      <slot name="suffix">
        <i :class="['quick-filter-item__suffix-icon',suffixIcon]"
           v-if="suffixIcon"></i>
      </slot>
    </span>

  </div>
</template>

<script>
export default {
  name: 'QuickFilterItem',

  props: {
    name: {
      type: String
    },

    prefixIcon: {
      type: String
    },
    suffixIcon: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    },
    close: {
      type: Boolean
    },
    trigger: {
      type: String,
      default: 'hover'
    },
    total: {},
    isShowTotal: {
      type: Boolean
    }
  }
}
</script>

<style lang="scss" scoped>
.mark {
  .el-badge__content{
    background: #0050B3;
  }
}
.quick-filter-item {
  height: 40px;
  display: inline-flex;
  align-items: center;
  background: #f2f6fc;
  box-shadow: 1px 0px 0px 0px #f0f0f0, inset 1px 1px 0px 0px #f0f0f0;
  text-decoration: none !important;
  font-size: 14px;
  padding: 13px 16px;
  //max-width: 165px;
  color: #404040;
  white-space: nowrap;

  &:last-child {
    border-right: 1px solid #f0f0f0;
  }

  &--disabled {
    pointer-events: none;
  }

  &__suffix {
    margin-left: 16px;
    font-size: 10px;
  }

  &__prefix {
    margin-right: 16px;
    font-size: 10px;
  }

  &--close {
    .quick-filter-item__prefix,
    .quick-filter-item__suffix {
      width: 0;
      overflow: hidden;
    }

    .quick-filter-item__prefix {
      margin-right: 0;
    }

    .quick-filter-item__suffix {
      margin-left: 0;
    }
  }

  &--hover {
    .quick-filter-item__prefix,
    .quick-filter-item__suffix {
      width: 0;
      overflow: hidden;
      transition: all 200ms;
    }

    .quick-filter-item__suffix {
      margin-left: 0;
    }

    .quick-filter-item__prefix {
      margin-right: 0;
    }

    &:hover {
      .quick-filter-item__prefix,
      .quick-filter-item__suffix {
        width: 10px;
      }

      .quick-filter-item__prefix {
        margin-right: 16px;
      }

      .quick-filter-item__suffix {
        margin-left: 16px;
      }
    }
  }

  &:not(.quick-filter-item--active):hover {
    border-color: #f0f0f0;
  }

  &.quick-filter-item--active {
    background: #ffffff;
    color: #0050b3;
    box-shadow: inset 1px 1px 0px 0px #f0f0f0;

    &:hover {
      background: #ffffff;
      color: #0050b3;
    }
  }
}
</style>
